<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../css/classfyList.css" />
        <script type="text/javascript" src="../js/flexible.debug.js"></script>
        <script type="text/javascript" src="../js/flexible_css.debug.js"></script>
        
        <!-- <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script> -->
        <style type="text/css">
        	
        </style>
    </head>
    <body>
        <header class="header">
            <span class="span_one"><img src="../img/形状 84.png" /></span>
            <span class="span_two">新品连衣裙</span>
            <span class="span_three"><a href="classifyContent.html">平铺</a></span>
        </header>
        
        <aside class="aside">
            <ul class="nav">
                <li>销量</li>
                <li>最新</li>
                <li>价格</li>
            </ul>
        </aside>
        <main class="main">
        	<article class="a_one"></article>
        	<article class="a_two"></article>
        	<article class="a_three"></article>
        	
        </main>
        <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="../js/artTemplate.js"></script>
        <script type="text/html" id="temp">
            {{each list as v}}
            <dl>
                <dt><img src="{{v.imgUrl}}"></dt>
                <dd>
                    <h1>{{v.title}}</h1>
                    <p>{{v.price}}</p>
                </dd>
            </dl>
            {{/each}}
        </script>
        <script type="text/html" id="temp2">
            {{each list as v}}
            <dl>
                <dt><img src="{{v.imgUrl}}"></dt>
                <dd>
                    <h1>{{v.title}}</h1>
                    <p>{{v.price}}</p>
                </dd>
            </dl>
            {{/each}}
        </script>
        <script type="text/html" id="temp3">
            {{each list as v}}
            <dl>
                <dt><img src="{{v.imgUrl}}"></dt>
                <dd>
                    <h1>{{v.title}}</h1>
                    <p>{{v.price}}</p>
                </dd>
            </dl>
            {{/each}}
        </script>
        <script type="text/javascript">
            $(function(){
				$('.span_one').click(function(){
                    location.href="classify02.html";
              	});
				$('.span_three').click(function(){
					location.href="classifyContent.html";
				});
				
				$('.nav li:first, .main article:first').addClass('curr').siblings().removeClass('curr');
            	$('.nav li').click(function(){
	            $(this).addClass('curr').siblings().removeClass('curr');
	            $(".main article").eq($(this).index()).addClass('curr').siblings().removeClass('curr');
            });
              	
                $.ajax({
                    url:"../json/classifyList.json",
                    type:"get",
                    success: function(data){
                    	console.log(data)
                        var str = template("temp",{list:data});
                        console.log(str)
                        $('.main .a_one').html(str);
                    }
                })
                
                $.ajax({
                    url:"../json/classifyList_two.json",
                    type:"get",
                    success: function(data){
                    	console.log(data)
                        var str = template("temp2",{list:data});
                        console.log(str)
                        $('.main .a_two').html(str);
                    }
                })
                
                $.ajax({
                    url:"../json/classifyList_three.json",
                    type:"get",
                    success: function(data){
                    	console.log(data)
                        var str = template("temp3",{list:data});
                        console.log(str)
                        $('.main .a_three').html(str);
                    }
                })
            })
            
        </script>
        
    </body>
</html>